<template>
  <div class="gi_page">
    <a-card>
      <a-space>
        <a-avatar :size="100" :image-url="userStore.avatar"></a-avatar>
        <div class="gi_mt gi_ml">
          <div class="profile">
            <span>用户名:</span>
            <span class="gi_ml name">{{ userStore?.userInfo.nickname }}</span>
            <a-button class="gi_ml" type="text" @click="ChangePassModalRef?.open()">
              <template #icon>
                <icon-edit />
              </template>
              <template #default>修改密码</template>
            </a-button>
          </div>
          <div class="gi_mt ava">
            <a-button type="outline" @click="visible = true">更改头像</a-button>
            <span class="gi_ml">修改头像只支持在线链接，不提供上传图片功能，如有需要可自行对接！</span>
          </div>
        </div>
      </a-space>
    </a-card>

    <a-card class="gi_mt" title="个人资料信息">
      <template #extra>
        <a-button type="text" @click="visibleProfile = true">
          <template #icon>
            <icon-edit />
          </template>
          <template #default>修改资料</template>
        </a-button>
      </template>

      <a-descriptions
        :label-style="{ width: '140px', textAlign: 'center' }"
        size="large"
        :data="data"
        bordered
        :column="1"
      />

      <ChangePassModal ref="ChangePassModalRef" />

      <a-modal
        v-model:visible="visible"
        title="更改头像"
        width="90%"
        :mask-closable="false"
        :modal-style="{ maxWidth: '420px' }"
      >
        <a-form ref="FormRef" auto-label-width>
          <a-form-item field="oldPass">
            <a-input v-model.trim="userStore.avatar" placeholder="请输入图片链接" allow-clear></a-input>
          </a-form-item>
        </a-form>
      </a-modal>

      <a-modal
        v-model:visible="visibleProfile"
        title="修改资料"
        width="90%"
        :mask-closable="false"
        :modal-style="{ maxWidth: '420px' }"
      >
        <a-form ref="FormRef" auto-label-width>
          <a-form-item label="昵称" field="oldPass">
            <a-input v-model="profileForm.nickname" placeholder="请输入昵称" allow-clear></a-input>
          </a-form-item>

          <a-form-item label="性别" field="oldPass">
            <a-select v-model="profileForm.sex" placeholder="请选择性别">
              <a-option value="1">男</a-option>
              <a-option value="0">女</a-option>
            </a-select>
          </a-form-item>

          <a-form-item label="地址" field="oldPass">
            <a-input v-model="profileForm.address" placeholder="请输入地址" allow-clear></a-input>
          </a-form-item>

          <a-form-item label="邮箱" field="oldPass">
            <a-input v-model="profileForm.email" placeholder="请输入邮箱" allow-clear></a-input>
          </a-form-item>
        </a-form>
      </a-modal>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from '@/stores/modules/user'
import ChangePassModal from './ChangePassModal.vue'

const userStore = useUserStore()

const ChangePassModalRef = ref<InstanceType<typeof ChangePassModal>>()

const profileForm = reactive({
  nickname: userStore?.userInfo.nickname,
  sex: '1',
  address: '浙江杭州',
  email: '123',
})

const data = [
  {
    label: '昵称',
    value: profileForm.nickname,
  },
  {
    label: '性别',
    value: profileForm.sex === '1' ? '男' : '女',
  },
  {
    label: '地址',
    value: profileForm.address,
  },
  {
    label: '邮箱',
    value: profileForm.email,
  },
]

const visible = ref(false)
const visibleProfile = ref(false)
</script>

<style scoped lang="scss">
.profile {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-flow: wrap;

  .name {
    opacity: 0.8;
  }

  span {
    font-size: 16px;
  }
}

.ava {
  display: flex;
  align-items: center;

  span {
    opacity: 0.6;
  }
}
</style>
